<template>
  <div class="news-container">
    <div
      class="news-container-all"
      v-for="(list, index) of newsData"
      @click="goNewsDetail(list.id)"
      :key='index'>
    <!-- <div class="news-container-all" v-for="(list, index) of newsData" :key='index'> -->
      <h1>{{ list.newsTitle }}</h1>
      <div class="news-img">
        <img :src="list.newsImg" alt="图片加载中ing">
      </div>
      <p class="news-container-content">
        {{ list.newsCon }}
      </p>
      <p class="news-container-time">
        发布时间 <span class="news-time">{{ list.newsTime }}</span>
      </p>
    <!-- </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    newsData: Array
  },
  methods: {
    // 携带ID传递
    goNewsDetail(id){
      this.$router.push({
        path: 'newsDetail',
        query: {
          id: id
        }
      })
    }
  },

}
</script>

<style lang="less">
  .news-container{
    width: 100%;
    height: 100%;
    background: white;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    margin-bottom: 1.4rem;
    .news-container-all{
      width: 100%;
      height: 100%;
      border-bottom: 1px solid #eee;
      h1{
        line-height: 1.2rem;
        font-size: 0.44rem;
        font-weight: 600;
        padding-left: .2rem;
      }
      .news-img{
        width: 95%;
        height: 100%;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
          border-radius: .2rem;
        }
      }
      .news-container-content{
        padding: .2rem;
        font-size: .36rem;
        line-height: .5rem;
        color: #696969;
      }
      .news-container-time{
        padding: 0 .2rem .35rem .2rem;
        font-size: .4rem;
        .news-time{
          margin-left: .1rem;
          color: #2796d5;
        }
      }
    }
  }
</style>
